<template>
    <span>
        <Button type="info" size="small" @click="handleImportClientsShow">批量导入设备</Button>
        <Modal v-model="import_clients_modal" title="导入设备" :mask-closable="false">
            <div style="text-align:left;padding:10px;">
                <p>格式要求：共5列，第一行为表头</p>
                <p>第一列：设备ID，长度16，仅允许由大写字母、小写字母和数组组成</p>
                <p>第二列：设备名称，任意</p>
                <p>第三列：设备IP，可为空，如果不为空则必须是合法的ipv4地址或域名</p>
                <p>第四列：设备类型，任意</p>
                <p>第五列：设备描述，任意</p>
            </div>
            <div>
                <Upload
                    ref="clients_file_upload"
                    type="drag"
                    :before-upload="handleUpload"
                    action="base_url + '/import_clients'">
                    <div style="padding: 20px 0">
                        <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                        <p>点击选择文件或者拖拽文件此处，只支持CSV格式文件导入</p>
                    </div>
                </Upload>
                <div v-if="clients_file !== null">导入文件: {{ clients_file.name }} </div>
            </div>
            <template #footer>
                <Button type="primary" @click="handleImportClientsOk" :disabled="clients_file == null" :loading="loadingStatus">{{ loadingStatus ? '导入中...' : '导入' }}</Button>
                <Button type="text" @click="import_clients_modal = false">取消</Button>
            </template>
        </Modal>
    </span>
</template>

<script>
export default {
    name: 'ClientBatchImportButton',
    data() {
        return {
            import_clients_modal: false,
            clients_file: null,
            loadingStatus: false,
        }
    },
    methods: {
        handleImportClientsShow() {
            this.clients_file = null;
            this.import_clients_modal = true;
        },
        handleUpload(file) {
            this.clients_file = file;
            return false; // 阻止默认上传行为
        },
        handleImportClientsOk() {
            if (this.clients_file == null) {
                this.errorMessage('请选择文件');
                return;
            }
            //this.$refs.clients_file_upload.submit(); // 手动触发上传
            let formData = new FormData();
            formData.append('file', this.clients_file);
            this.loadingStatus = true;
            this.$http.post('/import_clients', formData).then(res => {
                if (res.status == 'ok') {
                    this.$Message.success({
                        content: res.data,
                        duration: 3,
                    });
                    this.loadingStatus = false;
                    this.import_clients_modal = false;
                    this.$emit('success', res.data);
                }else {
                    this.errorMessage({
                        content: res.data,
                        duration: 10,
                    });
                    this.loadingStatus = false;
                }
            }).catch(err => {
                    this.errorMessage({
                        content: err,
                        duration: 10,
                    });
                this.loadingStatus = false;
            });
        },
            
        
    }
}
</script>